<template>
  <a-card :bordered="false">
    <a-spin :spinning="isLoading">
      <div class="card-title">{{ $route.meta.title }}</div>
      <div class="table-operator">
        <!-- 搜索板块 -->
        <a-row class="row-item-search">
          <!-- <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
            <a-form-item label="关键词查询">
              <a-input style="width: 342px" placeholder="请输入关键词" v-decorator="['searchValue']">
                <a-select
                  slot="addonBefore"
                  v-decorator="['searchType', { initialValue: 10 }]"
                  style="width: 100px"
                >
                  <a-select-option
                    v-for="(item, index) in SearchTypeEnum"
                    :key="index"
                    :value="item.value"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </a-input>
            </a-form-item>
            <a-form-item label="发票类型">
              <a-select v-decorator="['status', { initialValue: '' }]">
                <a-select-option value="">全部</a-select-option>
                <a-select-option
                  v-for="(item, index) in InvoiceTypeEnum"
                  :key="index"
                  :value="item.value"
                >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item class="search-btn">
              <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
            </a-form-item>
            <a-form-item class="search-btn">
              <a-button @click="handleReset">重置</a-button>
            </a-form-item>
          </a-form> -->
          <div class="tab-list fl-l">
            <a-radio-group :defaultValue="status" @change="handleStatus">
              <a-radio-button value="">全部</a-radio-button>
              <a-radio-button :value="item.value" v-for="(item, index) in InvoiceTypeEnum.data" :key="index">{{item.name}}</a-radio-button>
            </a-radio-group>
          </div>
          <div class="tab-list fl-l" style="margin-left:40px">
            <a-radio-group :defaultValue="signed" @change="handleSign">
              <a-radio-button value="">全部</a-radio-button>
              <a-radio-button :value="index" v-for="(item, index) in ['未开票', '已开票']" :key="index">{{item}}</a-radio-button>
            </a-radio-group>
          </div>
        </a-row>
      </div>
      <!-- 列表内容 -->
      <div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-bordered">
        <div class="ant-table-content">
          <div class="ant-table-body">
            <table>
              <thead class="ant-table-thead">
                <tr>
                  <th v-for="(item, index) in columns" :key="index">
                    <span class="ant-table-header-column">
                      <div>
                        <span class="ant-table-column-title">{{ item.title }}</span>
                      </div>
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody class="ant-table-tbody">
                  <tr v-for="(record, index) in list.data" :key="`invoice_${record.order_id}_${index}`">
                    <td width="140">{{record.order_no}}</td>
                    <td width="100">{{record.order_price}}</td>
                    <td width="160">
                      <a-tag color="purple" v-if="record.invoice && record.invoice.status==0">{{ InvoiceTypeEnum[record.invoice.status].name }}</a-tag>
                      <a-tag color="blue" v-if="record.invoice && record.invoice.status==1">{{ InvoiceTypeEnum[record.invoice.status].name }}</a-tag>
                    </td>
                    <td>
                      {{record.invoice && record.invoice.name}}
                    </td>
                    <td>
                      {{record.invoice && record.invoice.identify_number}}
                    </td>
                    <td width="100">
                      <a-tag v-if="record.invoice_status === 10" color="orange">未开票</a-tag>
                      <a-tag v-if="record.invoice_status === 20" color="green">已开票</a-tag>
                    </td>
                    <td width="180">
                      <div class="actions">
                        <router-link
                          v-if="$auth('/order/invoice/detail')"
                          :to="{ path: '/order/invoice/detail', query: { orderId: record.order_id } }"
                        >详情</router-link>
                        <a
                          v-action:cancel
                          v-if="(
                            record.invoice_status == 10
                          )"
                          @click="handleInvoiceStatus(record)"
                        >设为已开票</a>
                      </div>
                    </td>
                  </tr>
              </tbody>
            </table>
          </div>
          <!-- 空状态 -->
          <a-empty v-if="!list.data.length" :image="simpleImage" />
        </div>
      </div>
      <div style="height:34px"></div>
      <!-- 分页器 -->
      <div v-if="list.data.length" class="pagination">
        <a-pagination
          :current="page"
          :pageSize="list.per_page"
          :total="list.total"
          @change="onChangePage"
        />
      </div>
    </a-spin>
  </a-card>
</template>

<script>
import { Empty, Modal } from 'ant-design-vue'
import { assignment } from '@/utils/util'
import * as Api from '@/api/order'
import {
  InvoiceTypeEnum
} from '@/common/enum/order'

// 表格字段
const columns = [
  {
    title: '订单号',
    align: 'center'
  },
  {
    title: '订单金额',
    align: 'center'
  },
  {
    title: '发票类型',
    dataIndex: 'status',
    width: '100px',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '公司全称',
    align: 'center'
  },
  {
    title: '纳税识别号',
    align: 'center'
  },
  {
    title: '开票状态',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '180px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'Index',
  data() {
    return {
      // 当前表单元素
      searchForm: this.$form.createForm(this),

      // 查询参数
      queryParam: {},
      status: '',
      signed: '',
      // 正在加载
      isLoading: false,
      // 表格字段
      columns,
      // 当前页码
      page: 1,
      list: { data: [], total: 0, per_page: 10 },
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
    }
  },
  computed: {
    dataType() {
      // let str = 'invoice'
      // if (this.status === '') {
      //   if (this.signed == 0) {
      //     str = 'invoicetype'
      //   } else if (this.signed == 1) {
      //     str = 'invoicetypes'
      //   }
      // } else if (this.status === 0) {
      //   str = 
      // }
      const jet = {
        '_': 'invoice',
        '0_': 'invoicetype',
        '1_': 'invoicetypes',
        '_0': 'invoiceweikai',
        '_1': 'invoiceyikai',
        '0_0': 'invoiceweikaitype',
        '0_1': 'invoiceyikaitypezy',
        '1_0': 'invoiceweikaitypept',
        '1_1': 'invoiceyyikaitype',
      }
      return jet[this.status + '_' + this.signed]
    }
  },
  beforeCreate () {
    // 批量给当前实例赋值
    assignment(this, {
      InvoiceTypeEnum
    })
  },
  created () {
    // 初始化页面
    this.init()
  },
  methods: {
    init() {
      // this.dataType = this.getDataType()
      this.searchForm.resetFields()
      this.queryParam = {}
      this.status = ''
      this.handleRefresh(true)
    },

    handleSign(e) {
      this.signed = e.target.value
      this.handleRefresh(true)
    },
    handleStatus(e) {
      this.status = e.target.value
      this.handleRefresh(true)
    },

    // 获取列表数据
    getList () {
      const { dataType, queryParam, page } = this
      this.isLoading = true
      Api.list({ dataType, ...queryParam, page })
        .then(response => {
          this.list = response.data.list
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh (bool = false) {
      bool && (this.page = 1)
      this.getList()
    },
    // 确认搜索
    handleSearch (e) {
      e.preventDefault()
      this.searchForm.validateFields((error, values) => {
        if (!error) {
          this.queryParam = { ...this.queryParam, ...values }
          this.handleRefresh(true)
        }
      })
    },

    // 重置搜索表单
    handleReset () {
      this.searchForm.resetFields()
    },

    // 翻页事件
    onChangePage (current) {
      this.page = current
      this.handleRefresh()
    },

    //调整状态
    handleInvoiceStatus(record) {
      const that = this
      Modal.confirm({
        title: '设定开票',
        content: '调整改发票为已开票吗？',
        onOk: () => {
          Api.setInvoiceStatus({
            order_id: record.order_id,
            invoice_status: 20
          }).then(() => {
            that.handleRefresh()
          })
        }
      })
    }
  }
}
</script>

<style>

</style>